<template>
	<view class="container">
		<form @submit="formSubmit" @reset="formReset">
			<view class="formcontent">
				<view class="logintitle">登录 | 注册</view>
				<view class="login_dl">
					<view class="login_dt">手机号码</view>
					<view class="login_dd"><input class="log_inp" type="number" v-model="mobile" @input="inputmobile"
							placeholder="请输入您的手机号" /></view>
				</view>
				<view class="login_dl">
					<view class="login_dt">验证码</view>
					<view class="login_dd disflex">
						<view class="dflex1"><input class="log_inp" type="number" @input="iyzm" placeholder="请输入验证码" />
						</view>
						<view class="yzmimg">
							<jp-verification-literalness ref="capture" :contentHeight="36" :contentWidth="90"
								backgroundColor="#ffffff"></jp-verification-literalness>
						</view>
					</view>
				</view>



				<view class="login_xeyi"><checkbox-group class="fl" @change="checkboxChange">
						<checkbox value="cb" :checked="check" style="transform:scale(0.7)" />
					</checkbox-group>我已阅读并同意<text @tap="xieyi">用户服务协议</text></view>
				<view class="login_button">
					<button class="loginbtn" @tap="getyzm">获取短信验证码</button>
					//#ifdef MP-WEIXIN
					<button class="login_wx" open-type="getPhoneNumber"
						@getphonenumber="igetPhoneNumber">手机号快捷登录</button>
					//#endif
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import API from "@/common/api.js";
	export default {
		data() {
			return {
				state: false,
				issend: false,
				mobile: '',
				code: "",
				val: '',
				securityCode: '',
				lineColorList: ['rgba(0, 85, 255, 0.5)', 'rgba(85, 255, 0, 0.5)', 'rgba(255, 255, 0, 0.5)'],
				colorList: ['rgb(255, 0, 0)', 'rgb(255, 0, 127)', 'rgb(255, 0, 255)']
			}
		},
		onLoad() {
			var $this = this
			uni.login({
				success: res => {
					$this.code = res.code
				}
			})
		},
		methods: {
			igetPhoneNumber(e) {
				var $this = this;
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					var parentid = uni.getStorageSync("parentid")
					var json = {
						code: $this.code,
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						parentid: parentid
					}
					API.post("user/getPhoneNumber", json).then((res) => {
						if (res.code == 1) {
							API.showToast("登录成功", "/pages/index/index")
						} else {
							API.showToast(res.msg)
						}
						uni.login({
							success: res => {
								$this.code = res.data
							}
						})
					})
				} else {
					API.showToast("获取失败")
				}
			},
			iyzm(e) {
				this.yzm = e.detail.value
			},
			xieyi(e) {
				uni.navigateTo({
					url: "/pages/user/helpdetail/helpdetail?from=xieyi"
				})
			},
			checkboxChange(e) {
				this.state = !this.state;
			},
			inputmobile(e) {
				this.mobile = e.detail.value
			},
			getyzm() {
				console.log(this.$refs.capture.identifyCode)
				var reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
				if (!reg.test(this.mobile)) {
					API.showToast('请输入手机号');
					this.mobile = '';
					return false;
				} else if (this.$refs.capture.identifyCode != this.yzm) {
					API.showToast('请输入验证码');
				} else if (!this.state) {
					API.showToast('请阅读并同意协议');
				} else {
					if (!this.issend) {
						this.issend = true;
						API.post("user/sendcode", {
							mobile: this.mobile
						}).then(res => {
							this.issend = false;
							if (res.code == 1) {
								uni.redirectTo({
									url: '/pages/user/loginyzm/loginyzm?mobile=' + this.mobile
								})
							} else {
								API.showModal(res.msg);
							}
						}).catch(res => {

						});

					}
				}

			}

		}
	}
</script>

<style lang="scss">
	@import '@/static/login.css';

	.content {
		padding: 0 20px;

		.hader {
			line-height: 80rpx;
			font-weight: 800;
		}
	}
</style>